<!-- NG-ZORRO -->
<div class="container">
  <img height="200" src="assets/icons/favicon.png">

  <div class="form">
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control [nzErrorTip]="combineTpl">
          <nz-input-group nzPrefixIcon="user">
            <input type="text" nz-input formControlName="username" placeholder="用户名" appForbiddenName="bob" />
            <ng-template #combineTpl let-control>
              <ng-container *ngIf="control.hasError('forbiddenName')">名称不能包含Bob字符串！</ng-container>
              <ng-container *ngIf="control.hasError('maxlength')">最大长度不能超过12！</ng-container>
              <ng-container *ngIf="control.hasError('minlength')">最小长度不能小于2！</ng-container>
              <ng-container *ngIf="control.hasError('required')">请输入你的账号！</ng-container>
            </ng-template>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入你的密码!">
          <nz-input-group nzPrefixIcon="lock">
            <input type="password" nz-input formControlName="password" placeholder="密码" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <div nz-row class="login-form-margin">
        <div nz-col [nzSpan]="12">
          <label nz-checkbox formControlName="remember">
            <span>记住我</span>
          </label>
        </div>
        <div nz-col [nzSpan]="12">
          <a class="login-form-forgot">忘记密码</a>
        </div>
      </div>
      <button *appAuth="actionCode['router.login.loginButton']" nz-button class="login-form-button login-form-margin"
        [nzType]="'primary'">登录</button>
      <button nz-button (click)="resetForm($event)">Reset</button>
    </form>
    <button (click)="increment()">Increment</button>
    <button (click)="increment5(5)">Increment 传递参数5</button>
    <div>Current Count: {{ count$|async }}</div>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset Counter</button>

    <div class="button" (click)="mockLoginIn()">【模拟登录】</div>
    <div class="button" (click)="mockLogOut()">【模拟退出】</div>

    <div class="button" (click)="gotoLogin()">【跳转到Login页面】</div>
    <div class="button" (click)="gotoHome()">【跳转到Home页面】</div>
    <div class="button" (click)="gotoMain()">【跳转到Main页面】</div>

  </div>